<template>
  <div class="ring-demo">
    <ul class="ring-box">
      <li class="ring-item"></li>
      <li class="ring-item"></li>
      <li class="ring-item"></li>
      <li class="ring-item"></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Ring',
  components: {},
  props: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {}
}
</script>

<style scoped lang="scss">
  .ring-demo
  .ring-box{
    display: flex;
    width:900px;
    height:300px;
    margin:0 auto;
    background: #0a76a4;
    justify-content: center;
    .ring-item{
      align-self: center;
      width: 200px;
      height:200px;
      background: #2ac06d;
      border-radius: 50%;
    }
  }
</style>
